<template>
	<!--size抽屉宽度（或高度）  default 378px 和 large 736px -->
	<a-drawer v-model:open="visible" ref="employeeDetailModalRef" class="edit-drawer modal-fixed-bottom"
		root-class-name="root-customer-drawer" width="800px" :closable="false" @close="onClose">
		<div class="closeable" @click="onClose">{{ $t('self.closeButton') }}</div>
		<div class="modal-header">{{ title }}</div>
		<a-form :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol"
			@finish="onSubmit">
			<a-form-item :label="$t('self.businessCharging.tips1')" name="pileName">
				<a-input allow-clear v-model:value="formState.pileName" placeholder="" />
			</a-form-item>
			<a-form-item :label="$t('self.businessCharging.tips7')" name="pileType">
				<a-select v-model:value="formState.pileType" :options="[
            { label: $t('self.businessCharging.types.tips1'), value: 1 },
            { label: $t('self.businessCharging.types.tips2'), value: 2 },
        ]" :placeholder="$t('self.pleaseChoose')" />
			</a-form-item>
			<a-form-item :label="$t('self.businessCharging.tips8')" name="chargePilePowerLow">
				<a-input allow-clear v-model:value="formState.chargePilePowerLow" placeholder="" />
			</a-form-item>
			<a-form-item :label="$t('self.businessCharging.tips9')" name="chargePilePowerMax">
				<a-input allow-clear v-model:value="formState.chargePilePowerMax" placeholder="" />
			</a-form-item>
			<!--      <a-form-item :label="$t('self.businessCharging.tips10')" name="stationName">-->
			<!--        <a-input allow-clear v-model:value="formState.stationName" placeholder="" disabled />-->
			<!--      </a-form-item>-->
			<!--      <a-form-item :label="$t('self.businessCharging.tips11')" name="stationName">-->
			<!--        <a-input allow-clear v-model:value="formState.stationName" placeholder="" disabled />-->
			<!--      </a-form-item>-->
			<!--桩协议-->
			<!--      <a-form-item :label="$t('self.businessCharging.tips12')" name="agreement">
        <a-select v-model:value="formState.agreement" :options="cdzXYOptions" :fieldNames="{label: 'label',value: 'key'}" :placeholder="$t('self.pleaseChoose')" />
      </a-form-item> -->
			<!--前置服务-->
			<a-form-item :label="$t('self.businessCharging.tips14')" name="appNode">
				<a-select v-model:value="formState.appNode" :options="qzfwOptions"
					:fieldNames="{label: 'label',value: 'key'}" :placeholder="$t('self.pleaseChoose')" />
			</a-form-item>
			<a-form-item :label="$t('self.businessCharging.tips15')" name="gunNum">
				<a-input-number allow-clear v-model:value="formState.gunNum" style="width: 100%" />
			</a-form-item>
			<!--充电接口-->
			<a-form-item :label="$t('self.businessCharging.tips16')" name="chargeInterface">
				<a-select mode="multiple" v-model:value="formState.chargeInterface" :options="cdqjkOptions"
					:fieldNames="{label: 'label',value: 'key'}" :placeholder="$t('self.pleaseChoose')" />
			</a-form-item>
			<a-form-item :label="$t('self.businessCharging.tips17')" name="pileNo" v-if="mode === 'add'">
				<a-input-number allow-clear v-model:value="formState.pileNo" style="width: 100%" />
			</a-form-item>

<!-- 			<a-form-item :label="$t('self.businessStation.modal.col14')" name="agreement">
				<a-select v-model:value="formState.agreement" :options="[
			        { label: $t('self.businessStation.vehicleType.tips1'), value: 0 },
			        { label: $t('self.businessStation.vehicleType.tips2'), value: 1 },
					{ label: $t('self.businessStation.vehicleType.tips3'), value: 2 },
			        { label: $t('self.businessStation.vehicleType.tips4'), value: 3 },
			    ]">
					<template #option="{ label }">
						{{ label }}
					</template>
				</a-select>
			</a-form-item> -->

			<div class="base-flex base-rows base-align-items-center base-justify-content-center footer">
				<a-button type="primary" html-type="submit">{{ $t('self.submitButton') }}</a-button>
				<a-button class="base-ml10" @click="onClose">{{ $t('self.cancelButton') }}</a-button>
			</div>

		</a-form>

	</a-drawer>
</template>

<script setup>
	import {
		computed,
		getCurrentInstance,
		onMounted,
		ref
	} from 'vue'
	import {
		message
	} from 'ant-design-vue'
	import chooseAreaForLocal from '@/components/choose/choose-area-for-local.vue'
	const {
		proxy
	} = getCurrentInstance()
	const $TOOL = proxy.$TOOL
	const $API = proxy.$API
	const $T = proxy.$t
	const emit = defineEmits(['close', 'ok'])

	const visible = ref(false)
	// 模式，add新增，show查看，edit编辑
	const mode = ref('add')
	const labelCol = {
		style: {
			width: '230px',
		},
	};
	const wrapperCol = {
		span: 16,
	};
	const title = ref('')
	const formState = ref({
		"id": '',
		"stationId": "", // 站点id
		"policyId": "", // 资费id
		"pileName": "", // 充电桩名称
		"pileSeri": "", // 桩序列号
		"pileType": null, // 桩类型，直流还是交流
		"chargeInterface": [], // 充电接口，Type 2,SAE J1772 (2个用逗号隔开，我需要改下接口改成字符串)
		"chargePilePowerLow": '', // 功率
		"chargePilePowerMax": '', // 最大功率
		"orgId": "", // 运营商id
		"pileNo": "", // 充电桩总数
		"gunNum": "", // 枪数量，添加桩数量
		"appNode": "1", // 前置服务
		"agreement": 0
	})
	// 桩协议的下拉列表
	const cdzXYOptions = ref([{
		label: 'ocpp1.6J',
		key: 1
	}])
	// 前置服务的下拉列表
	const qzfwOptions = ref([{
		label: 'note1',
		key: '1'
	}])
	// 充电接口的下拉列表
	const cdqjkOptions = ref([{
			label: 'Type 2',
			key: 'Type 2'
		},
		{
			label: 'SAE J1772',
			key: 'SAE J1772'
		},
		{
			label: 'CHAdeMO',
			key: 'CHAdeMO'
		},
		{
			label: 'GB/T',
			key: 'GB/T'
		},
		{
			label: 'Tesla',
			key: 'Tesla'
		}
	])

	const vehicleOptions = ref([{
			label: $T('self.businessStation.vehicleType.tips1'),
			value: 0
		},
		{
			label: $T('self.businessStation.vehicleType.tips2'),
			value: 1
		},
		{
			label: $T('self.businessStation.vehicleType.tips3'),
			value: 2
		},
		{
			label: $T('self.businessStation.vehicleType.tips4'),
			value: 3
		},
	])

	const formRules = ref({
		pileName: [{
			required: true,
			message: $T('self.pleaseInput') + $T('self.businessCharging.tips1'),
			trigger: 'change'
		}],
		pileType: [{
			required: true,
			message: $T('self.pleaseChoose') + $T('self.businessCharging.tips3'),
			trigger: 'change'
		}],
		chargePilePowerLow: [{
			required: true,
			message: $T('self.pleaseInput') + $T('self.businessCharging.tips8'),
			trigger: 'change'
		}],
		chargePilePowerMax: [{
			required: true,
			message: $T('self.pleaseInput') + $T('self.businessCharging.tips9'),
			trigger: 'change'
		}],
		appNode: [{
			required: true,
			message: $T('self.pleaseInput') + $T('self.businessCharging.tips14'),
			trigger: 'change'
		}],
		gunNum: [{
			required: true,
			message: $T('self.pleaseInput') + $T('self.businessCharging.tips15'),
			trigger: 'change'
		}],
		chargeInterface: [{
			required: true,
			message: $T('self.pleaseChoose') + $T('self.businessCharging.tips16'),
			trigger: 'change'
		}],
		agreement: [{
			required: true,
			message: $T('self.pleaseChoose') + $T('self.businessCharging.modal.col14'),
			trigger: 'change'
		}],
	})

	onMounted(async () => {

	})

	const onSubmit = (values) => {
		const params = {
			...formState.value
		}
		params.chargeInterface = params.chargeInterface.join(',')
		// console.log(params)
		// return
		if (mode.value === 'add') {
			// 添加
			$API.backend.businessCharging.add.post(params).then(res => {
				message.success($T('self.message.success'))
				onReset()
				visible.value = false
				emit('ok')
			}).catch(err => {
				// message.error($T('self.message.error'))
				message.error(err.msg);
			})
		} else {
			// 修改
			$API.backend.businessCharging.edit.post(params).then(res => {
				message.success($T('self.message.success'))
				onReset()
				visible.value = false
				emit('ok')
			}).catch(err => {
				// message.error($T('self.message.error'))
				message.error(err.msg);
			})
		}
		// console.log(formState.value)
		// console.log('submit!', values);
	}

	const onReset = () => {
		// 清空内容
		formState.value = {
			"id": '',
			"stationId": "", // 站点id
			"policyId": "", // 资费id
			"pileName": "", // 充电桩名称
			"pileSeri": "", // 桩序列号
			"pileType": null, // 桩类型，直流还是交流
			"chargeInterface": [], // 充电接口，Type 2,SAE J1772 (2个用逗号隔开，我需要改下接口改成字符串)
			"chargePilePowerLow": '', // 功率
			"chargePilePowerMax": '', // 最大功率
			"orgId": "", // 运营商id
			"pileNo": "", // 充电桩总数
			"gunNum": "", // 枪数量，添加桩数量
			"agreement": 0, // 桩协议
			"appNode": "1"
		}
	}

	const onClose = () => {
		onReset()
		visible.value = false
		emit('close')
	}

	const add = (stationId) => {
		mode.value = 'add'
		title.value = $T('self.businessCharging.tips19')
		formState.value.stationId = stationId
		visible.value = true
	}
	const edit = (record) => {
		mode.value = 'edit'
		// console.log('record', record)
		const params = {
			...record
		}
		// console.log('params', params)
		params.chargeInterface = params.chargeInterface ? params.chargeInterface.split(",") : []
		// console.log('vehicleOptions', vehicleOptions.value) 
		const agreementOption = vehicleOptions.value.find(option => option.value === parseInt(record.agreement, 10))
		params.agreement = agreementOption.label ? agreementOption.label : vehicleOptions.value[0].label
		$TOOL.array.cloneExistKey(formState.value, params)
		title.value = $T('self.businessCharging.tips20')
		visible.value = true
	}

	// 子组件中要通过defineExpose将方法暴露给父组件
	defineExpose({
		add,
		edit,
	})
</script>

<style lang="scss" scoped>
	.edit-drawer {
		position: relative;

		.closeable {
			@include closeable;
		}
	}
</style>
